<template>
  <div style="overflow: hidden;width:100%;height:100%;" id="xGridParent">
    <vxe-grid ref='xGrid' v-bind="grid_options" @form-reset="formResetEvent">
      <template #toolbar_tools>
        <el-button type="primary" :size="size" icon="fa fa-plus" @click="GridEvent.newForm()"> 新增</el-button>
        <el-button type="primary" :size="size" icon="fa fa-edit (alias)" @click="editEvent()"> 编辑</el-button>
        <el-button type="primary" :size="size" icon="fa fa-trash-o" @click="deleteEvent()"> 删除</el-button>
        <span class="titletext">
             共计有<span @click="Modelcensu(allnum,showType)">{{ allnum }}</span>台设备,其中
             <div style="display: inline-block;" v-for="item in wzEquipList" :key="item.sblxmc">
              {{ item.sblxmc }}有
              <span @click="Modelcensu(item,showType)">{{ item.equipNum }}</span>台;
             </div>
        </span>
      </template>
      <template #gldw_item="{ data }">

        <vxe-select v-model="data.gldwmc" transfer @change="chnageGldw" placeholder='---请选择---'>
          <vxe-option v-for="item in gldwList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
        </vxe-select>


      </template>
      <template #sskfmc_item="{ data }">
        <vxe-select v-model="data.sskfmc" transfer placeholder='---请选择---'>
          <vxe-option v-for="item in sskfmcList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
        </vxe-select>
      </template>
      <template #sbzpshow="{row}">
        <el-image
          style="width: 80px; height: 40px"
          :src="formatPhotoUrl(row.sbzp)"
          @click="viewPhoto(row.sbzp)"
        ></el-image>
      </template>
    </vxe-grid>
    <el-dialog v-dialogDrag top="0px" :title="formModel.title" :visible.sync="formModel.dialogVisible"
               :width="formModel.width" :closeOnClickModal="formModel.closeOnClickModal" :before-close="closeEvent">
      <tbizcEneryEquipForm v-if="formModel.dialogVisible && formModel.componentId==='EneryEquipForm'"
                           :formData="formModel.TBizcEneryEquipFormData" @closeEvent="closeEvent">
      </tbizcEneryEquipForm>

    </el-dialog>

    <!-- <el-dialog  top="5px"
        :title="formModel1.title" :visible.sync="formModel1.dialogVisible" :width="formModel1.width" :closeOnClickModal="formModel1.closeOnClickModal"
        >
        <accountQueryForm v-if="formModel1.dialogVisible && formModel1.componentId=='TBizcEneryEquipForm' " :formData="formModel1.TBizcEneryEquipFormData" @closeEvent="tBizcEneryEquipFormCloseEvent"></accountQueryForm>
      </el-dialog> -->
    <photo-viewer v-if="photoInfo.visible" :photoInfo="photoInfo"/>
    <censuTable ref="censuTable"></censuTable>
  </div>
</template>

<script>
import {reactive} from 'vue'
import {formModel, GridEvent} from './model/equipmentMaintenance-table.js'
import {formModel1, GridEvent1} from "./model/accountQuery-table"
import {accountQueryApi} from '@/api/equip/accountQueryApi.js' //物资设备统计接口
import {warehouseManagement} from '@/api/equip/warehouseManagement.js'
import VXETable from "vxe-table";
import {getInfo} from "@/api/login";
import {listDept} from "@/api/system/dept";

export default {
  name: "equipmentMaintenance",
  components: {
    computerRoomManagementForm: () => import("./components/accountQueryForm.vue"),
    tbizcEneryEquipForm: () => import("./components/equipmentMaintenanceForm.vue"),
    PhotoViewer: () => import("@/components/viewer/PhotoViewer.vue"),
    censuTable: () => import("./components/censu-table.vue")
  },
  data() {
    return {
      gldwList: [],
      sskfmcList: [],
      wzEquipList: [],
      allnum: '',//设备统计总数
      photoInfo: {
        visible: false,
        photos: [
          //{src:'https://poi-pic-gz.cdn.bcebos.com/pic_f7b1a5e7b50dbc253a34d611d26fe7fd.jpg',desc:'我是第1张照片'},
        ],
        defaultIndex: 0
      },
      size: "small",  //按钮尺寸大小//
      GridEvent: reactive(GridEvent),
      formModel: reactive(formModel),
      GridEvent1: reactive(GridEvent1),
      formModel1: reactive(formModel1),
      grid_options: {
        border: true, 				//表格边框//
        stripe: true, 				//行斑马色//
        showHeaderOverflow: true, //标头影藏//
        showOverflow: true,       //显示隐藏//
        keepSource: true,         //保持原始值的状�?�，被某些功能所依赖，比如编辑状态�?�还原数据等（开启后影响性能，具体取决于数据量）//
        id: 'full_edit_1',        //表格id，保证唯�?�?//
        height: 700,              //表格默认高度//
        rowId: 'sbbm',            //指定记录主键//
        rowConfig: {
          isCurrent: true,        //当鼠标点击列头时，是否要高亮当前�?//
          isHover: true,          //当鼠标移到列头时，是否要高亮当前列头//
        },
        columnConfig: {
          resizable: true         //每一列是否启用列宽调�?//
        },
        customConfig: {
          resizable: true,         //每一列是否启用列宽调�?//
          storage: true
        },
        printConfig: {
          columns: [              //指定�?//
            {field: 'sbbm'},
            {field: 'sbmc'},
            {field: 'yxzt'},
            {field: 'jlfs'},
            {field: 'sfsc'},
            {field: 'cap'},
            {field: 'sblx'},
            {field: 'sblxmc'},
            {field: 'num'},
            {field: 'standard'},
            {field: 'xh'},
            {field: 'cjmc'},
            {field: 'ccbm'},
            {field: 'ccTime'},
            {field: 'sjdhTime'},
            {field: 'cyDwmc'},
            {field: 'xmlxr'},
            {field: 'xmmc'},
            {field: 'xmbh'},
            {field: 'zlqx'},
            {field: 'yjccTime'},
            {field: 'xmdz'},
            {field: 'lxrPhone'},
            {field: 'lxTime'},
            {field: 'djhszt'},
            {field: 'cyDwbm'},
          ]
        },
        sortConfig: {             //排序配置�?//
          trigger: 'cell',        //触发方式（注：当多种功能重叠时，会同时触发）//
          remote: true            //�?有列是否使用服务端排序，如果设置�? true 则不会对数据进行处理//
        },
        filterConfig: {
          remote: true            //�?有列是否使用服务端筛选，如果设置�? true 则不会对数据进行处理//
        },
        pagerConfig: {            //分页配置�?//
          pageSize: 10,           //每页大小//
          pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],    //每页大小选项列表//
          layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],    //自定义布�?//
          background: true,        //带背景颜�?//
          fixed: true,            //固定分页//
        },
        formConfig: {
          form: true,             //启用表单代理//
          size: 'small',          //尺寸//
          titleAlign: 'right',    //aa�?有项的标题对齐方式aa//
          titleWidth: '120',      //标题宽度aa//
          titleColon: true,       //是否显示标题冒号aa//
          collapseStatus: false,   //折叠状�?�aa//
          items: [                //项列表aa//
            {field: 'gldwmc', title: '单位', span: 6, itemRender: {}, slots: {default: 'gldw_item'}},
            {field: 'sskfmc', title: '所属库房', span: 6, itemRender: {}, slots: {default: 'sskfmc_item'}},
            // { field: 'sbmc', title: '设备名称', span: 6, itemRender: { name: '$input', props: { placeholder: '---请输入---' } } },
            // { field: 'sbmc', title: '设备名称', span: 6, itemRender: { name: '$input', props: { placeholder: '---请输入---' } } },
            {
              field: 'sbmc',
              title: '设备名称',
              span: 6,
              itemRender: {name: '$input', props: {placeholder: '---请输入---'}}
            },
            {
              field: 'sbgg',
              title: '规格',
              span: 6,
              folding: true,
              itemRender: {name: '$input', props: {placeholder: '---请输入---'}}
            },
            {
              field: 'xh',
              title: '型号',
              span: 6,
              folding: true,
              itemRender: {name: '$input', props: {placeholder: '---请输入---'}}
            },
            {
              field: 'sblxmc',
              title: '设备类型',
              span: 6,
              folding: true,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请输入---', clearable: true}}
            },
            {
              field: 'yxzt',
              title: '运行状态',
              span: 6,
              folding: true,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请输入---', clearable: true}}
            },
            {
              field: 'sbztbm',
              title: '设备状态',
              span: 6,
              folding: true,
              itemRender: {name: '$select', options: [], props: {placeholder: '---请输入---', clearable: true}}
            },
            {
              span: 6,
              align: 'center',
              collapseNode: true,
              itemRender: {
                name: '$buttons',
                children: [{
                  props: {
                    type: 'submit',
                    content: '查询',
                    status: 'primary',
                    icon: 'fa fa-search'
                  }
                }, {props: {type: 'reset', content: '重置', icon: 'fa fa-reply'}}]
              }
            }

          ]
        },
        toolbarConfig: {          //工具栏配�?//
          buttons: [],          //左侧按钮列表//
          refresh: true,          //刷新按钮配置//
          // import: true,        //导入按钮配置（需要设置import-config）//
          //export: true,        //导出按钮配置（需要设置export-config）aa//
          // print: true,         //打印按钮配置//
          // zoom: true,          //是否允许�?大化显示//
          custom: true,           //自定义列配置//
          slots: {
            buttons: 'toolbar_tools'    //按钮列表//
          }
        },
        proxyConfig: {
          seq: true, 		// 启用动�?�序号代理，每一页的序号会根据当前页数变�?//
          sort: true, 		// 启用排序代理，当点击排序时会自动触发 query 行为//
          filter: true, 	// 启用筛�?�代理，当点击筛选时会自动触�? query 行为//
          form: true, 		// 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为//
          // 对应响应结果 { result: [], page: { total: 100 } }//
          props: {
            result: 'data.records', 		//配置响应结果列表字段//
            total: 'data.total' 			//配置响应结果总页数字�?//
          },
          // 鍙帴鏀禤romise锛屽叿浣撳疄鐜拌嚜鐢卞彂鎸�//
          ajax: {
            // 当点击工具栏查询按钮或�?�手动提交指�? query或reload 时会被触�?//
            query: ({page, sorts, filters, form}) => {
              //=====给表单项赋初始�??======//
              GridEvent.initFormData(form);
              const queryParams = Object.assign({}, form)
              //处理排序条件//
              const firstSort = sorts[0]
              if (firstSort) {
                queryParams.sort = firstSort.property
                queryParams.order = firstSort.order
              }
              //处理筛�?�条�?//
              filters.forEach(({property, values}) => {
                queryParams[property] = values.join(',')
              })
              this.wzEquipTj()
              return GridEvent.queryData(page, queryParams)
            },
          }
        },
        columns: [
          {type: 'seq', title: '序号', width: 60, align: 'center', headerAlign: 'center'},
          {type: 'checkbox', align: 'center', width: 60},
          {field: 'gldwmc', title: '单位', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'sbmc', title: '设备名称', minWidth: 150, align: 'center', headerAlign: 'center',},
          {
            field: 'ccbm',
            title: '出厂编码',
            minWidth: 150,
            align: 'center',
            headerAlign: 'center',
            cellRender: {name: 'ccbm', events: {click: this.handleAuditPass}}
          },
          {field: 'sblxmc', title: '设备类型', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'pt', title: 'PT', minWidth: 80, align: 'center', headerAlign: 'center',},
          {field: 'ct', title: 'CT', minWidth: 80, align: 'center', headerAlign: 'center',},
          {field: 'sbztmc', title: '设备状态', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'sskfmc', title: '所属库房  ', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'sbgg', title: '规格', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'xh', title: '型号', minWidth: 150, align: 'center', headerAlign: 'center',},
          {field: 'yxztmc', title: '运行状态', minWidth: 90, align: 'center', headerAlign: 'center',}
        ],
        importConfig: {                         //导入配置�?//
          remote: true,                         //是否服务端导�?//
          importMethod: this.importMethod,      //只对 remote=true 有效，该函数用于自定义导入或服务端导入，返回 Promise//
          types: ['xlsx'],                      //导入的文件类型列�?//
          modes: ['insert']                     //导入数据的方�?//
        },
        exportConfig: {                         //导出配置�?//
          remote: true,                         //是否服务端导�?//
          exportMethod: this.exportMethod,      //只对 remote=true 有效，该函数用于自定义导出或服务端导出，返回 Promise//
          types: ['xlsx'],                      //可�?�文件类型列�?//
          modes: ['current', 'selected', 'all'] //输出数据的方式列表，如果�? all，则会�?�过 proxy-config.ajax.queryAll 获取数据之后进行导出//
        },
        checkboxConfig: {                       //复�?�框配置�?//
          // labelField: 'id',                  //复�?�框显示的字段名，可以直接显示在复�?�框�?//
          reserve: true,                        //是否保留勾�?�状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前选中的状态（�?要有 row-id�?//
          highlight: true,                      //高亮勾�?�行//
          range: true                           //�?启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动�?�中或取消指定行�?//
        },
        editRules: {                            //校验规则配置�?//

        },
        editConfig: {                           //可编辑配置项//
          trigger: 'click',                     //触发方式//
          mode: 'row',                          //编辑模式//
          showStatus: true                      //只对 keep-source �?启有效，是否显示单元格新增与修改状�??//
        }
      }
    }
  },
  methods: {
    handleClose() {

    },
    formResetEvent() {
      this.sskfmcList = []
      console.log(this.sskfmcList, '重置')

    },
    viewPhoto(src, desc) {
      this.photoInfo.photos = [
        {src: src, desc: desc + ' 照片'}
      ]
      this.photoInfo.defaultIndex = 0;
      this.photoInfo.visible = true;
    },
    formatPhotoUrl(url) {
      // console.log('photourl22')
      let photo = this.udsUrl + url + '/user.jpg'
      // let photo=url.indexOf('http')!=-1?url:this.udsUrl+url+'/user.jpg'
      return photo
    },
    getOptionData_gldw() {
      getInfo().then(res => {
        let params = {
          deptId: res.user.dept.deptId,
          parentId: res.user.dept.parentId
        }
        listDept(params).then(res => {


          // 修改编辑框
          // const sexColumn = $grid.getColumnByField('sex')
          // sexColumn.editRender.options = sexList
          // 修改查询条件列表
          let optionList = [
            {label: '请选择', value: ''}
          ]
          res.data.forEach((item) => {
            // console.log(item,'item.,,,');
            optionList.push({label: item.deptName, value: item.deptId})
          })
          this.gldwList = optionList


        })
      })
    },
    chnageGldw(data) {
      this.$refs.xGrid._data.formData.sskfmc = null
      console.log(this.$refs.xGrid._data.formData.sskfmc, '清空')
      warehouseManagement.getKfByGldw(data.value).then(res => {
        this.sskfmcList = []
        res.data.forEach((item) => {
          this.sskfmcList.push({
            label: item.kfName, value: item.id
          })
        })
      }).catch(err => {

      })
    },
    setTableHeight: function () { //高度自�?�应//
      // const tableContainer = document.querySelector("#xGridParent");
      // const height = tableContainer.clientHeight;
      // this.grid_options.height = height - 5;
    },
    closeEvent(reload) {  //form表单编辑窗口关闭事件//
      formModel.closeDialogEvent(reload, this.$refs.xGrid)
    },
    handleAuditPass(row) {
      GridEvent.viewForm(row)
    },
    //物资统计
    wzEquipTj() {
      let params = {}
      accountQueryApi.wzEquipTj(params).then(res => {
        this.allnum = res.data.allNum
        this.wzEquipList = res.data.wzEquipList
      })
    },
    Modelcensu(num, type) {
      this.$refs.censuTable.showDialog(true, num, true, type)
    },
    editEvent() {    //编辑事件//
      const rows = this.$refs.xGrid.getCheckboxRecords(true);
      if (rows && rows.length === 1) {
        GridEvent.editForm(rows[0]);
      } else {
        this.$message.warning("只能选中1行数据进行编辑")
      }
    },
    deleteEvent() {  //删除事件//
      const rows = this.$refs.xGrid.getCheckboxRecords(true);

      // console.log(rowsId,'rowsr');
      if (rows[0].sbztbm === '0') {
        if (rows) {
          GridEvent.deleteEvent(rows, this.$refs.xGrid);
        }
      } else {
        this.$message.warning("只支持初始设备进行删除")
      }
    },
    exportWord() {//导出事件
      // alert('导出')
      GridEvent.exportXls(this.$refs.xGrid);
    },
    wzlbmcChangeEvent(value) {
      GridEvent.wzlbmcChangeEvent(this.$refs.xGrid, value)
    },

    handlePreview(info) {//模板导入
      console.log(info, 'iiiiiii');
      // GridEvent.exportXls(info);
      // let formData = new FormData();
      // formData.append("file",info.file);
      // formData.append("type","bzyhk");
      // SupportpersonnelApi.importXls(formData).then(res=>{
      //   antd.message.success(res)
      // }).catch(err=>{
      //   console.log(err)
      // })
      // GridEvent.exportXls(this.$refs.xGrid);
    },
    downloadXls() {
      window.open(process.env.VUE_APP_APP_API + '/equip/export/downloadTemplate')
      console.log(process.env.VUE_APP_APP_API + '/equip/export/downloadTemplate', '地址');
    }
  },
  mounted() {
    this.$nextTick(function () {
      // this.setTableHeight();
      GridEvent.getOptionData_yxzt(this.$refs.xGrid)
      GridEvent.getOptionData_sbzt(this.$refs.xGrid)
      GridEvent.getOptionData_sblxmc(this.$refs.xGrid)
      // GridEvent.getOptionData_ssnyzmc(this.$refs.xGrid)
      // GridEvent.getOptionData_gldw(this.$refs.xGrid)
      this.getOptionData_gldw(this.$refs.xGrid)
      GridEvent.getOptionData_jlfs(this.$refs.xGrid)
      GridEvent.getOptionData_sskf(this.$refs.xGrid)
      GridEvent.getOptionData_sblx(this.$refs.xGrid)
      //  GridEvent.wzlbmcChangeEvent(this.$refs.xGrid);
      // this.wzEquipTj()//物资设备统计
    })
    window.addEventListener('resize', this.setTableHeight);

  },
  destroyed() {
    window.removeEventListener('resize', this.setTableHeight);
  },
}
//入库编号穿透渲染
VXETable.renderer.add('ccbm', {
  renderDefault(h, renderOpts, params) {
    const {events = {}} = renderOpts
    const {row, column} = params
    return [
      <span style="color:#0000FF;cursor: pointer;" onClick={
        () => {
          events.click(params.row)
        }
      }>{params.row.ccbm}</span>
    ]
  }
})
</script>

<style scoped>
.upload-demo {
  display: inline;
  margin-left: 10px;
}

.titletext {
  color: red;
  margin-top: 5px;
  font-size: large;
  margin-left: 70px;
}

.titletext span {
  color: #0000ff;
  cursor: pointer;
}

/deep/ .vxe-input {
  height: 32px !important;
}
</style>

